<template>
    <div class="box">
        <el-container>
            <div class="mostTop"></div>
            <el-header class="clearfix">
                <p class="addCourseTitle">新增课程</p>
                <p class="return" @click="back()"> < 返回</p>
            </el-header>
            <el-main>
                <p class="courseDetails">基本信息</p>
                <div class="inputTitle clearfix">
                    <div class="left">
                        <p>课程名称</p>
                        <el-input v-model="courseName" placeholder="课程名称"></el-input>
                        <p>课程介绍</p>
                        <el-input
                                type="textarea"
                                :rows="4"
                                placeholder="课程介绍"
                                v-model="courseDesc">
                        </el-input>
                        <p>授课教师</p>
                        <div class="select">
                            <el-select v-model="departmentName" placeholder="选择部门" class="selectChildren" @change="departmentChoose()" >
                                <el-option
                                        v-for="item in options1"
                                        :key="item.id"
                                        :label="item.departmentName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                            <el-select v-model="teacherName" placeholder="选择老师" class="selectChildren" @focus="ChooseTeacher()">
                                <el-option
                                        v-for="item in options2"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                        <p>课程图片</p>
                        <div slot="tip" class="el-upload__tip">
                            单上传头像图片大小不能超过 2MB!,仅支持JPG、JPEG、PNG格式
                        </div>
                        <div id="upload">
                            <el-upload
                                    class="avatar-uploader"
                                    action="/image"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload"
                                    name="uploadFile"
                            >
                                <img v-if="localhost" :src="localhost" class="avatar"/>
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </div>
                    <div class="right">
                        <p>开课时间</p>
                        <div class="block">
                            <el-date-picker
                                    v-model="courseStartTime"
                                    type="date"
                                    placeholder="选择日期"
                                    format="yyyy-MM-dd"
                                    class="date"
                                    :picker-options="timeLimit">
                            </el-date-picker>

                        </div>
                        <p>持续时间</p>
                        <el-input v-model="courseDuration" placeholder="持续时间"></el-input>
                        <p>上课地址</p>
                        <el-input v-model="courseAddress" placeholder="上课地址"></el-input>
                    </div>
                </div>
            </el-main>
        </el-container>
        <div id="footBox">
            <div id="footer">
                <el-button type="info" @click="clear()">清空</el-button>
                <el-button type="success" @click="ok()">保存</el-button>
            </div>
        </div>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                timeLimit:{
                    disabledDate(time){
                        return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
                    }
                },
                courseName:'',
                courseDesc:'',
                teacherId:'',
                imageUrl: '',
                localhost:'',
                courseStartTime: '',
                courseDuration: '',
                courseAddress: '',
                options1: [],//部门选择下拉菜单里的内容
                departmentName:'',//部门选择input框里面的内容
                options2: [],//教师选择下拉菜单里的内容
                teacherName:'',//教师选择input框里面的内容
                managerName:'',
            };
        },
        methods: {
            //保存新增数据
            ok(){
                var reg=/^[0-9]*$/
                if (this.courseDesc==''){
                    this.$message({
                        type: 'error',
                        message:'课程描述不能为空'
                    });
                }else if (this.courseDuration==''){
                    this.$message({
                        type: 'error',
                        message:'课程持续时间不能为空'
                    });
                }else if (this.imageUrl==''){
                    this.$message({
                        type: 'error',
                        message:'没有上传课程图片'
                    });
                }else if (this.courseAddress==''){
                    this.$message({
                        type: 'error',
                        message:'上课地址不能为空'
                    });
                }else if (!reg.test(this.courseDuration)){
                    this.$message({
                        type: 'error',
                        message:'课程持续时间请输入数字'
                    });
                }else if (this.teacherName==''){
                    this.$message({
                        type: 'error',
                        message:'请选择上课教师'
                    });
                }else if (this.courseStartTime==''){
                    this.$message({
                        type: 'error',
                        message:'请选择上课时间'
                    });
                }
                else {this.$axios({
                    url:'/course/add',
                    method:'post',
                    data:{
                        courseName:this.courseName,
                        courseDesc:this.courseDesc,
                        teacherId:this.teacherName,
                        managerName:this.managerName,
                        id:null,
                        courseImage:this.imageUrl,
                        courseStartTime:this.courseStartTime,
                        courseDuration:this.courseDuration,
                        courseAddress:this.courseAddress,
                    }
                }).then((res)=>{
                    //console.log(res)
                    if (res.data.code==50010){
                        this.$message({
                            type: 'error',
                            message:'课程名称重复'
                        });
                    }else if (res.data.msg=='课程持续时间在1~48周'){
                        this.$message({
                            type: 'error',
                            message:'课程持续时间在1~48周'
                        });
                    }else if (res.data.msg=='课程名不能为空'){
                        this.$message({
                            type: 'error',
                            message:res.data.msg
                        });
                    }else if (res.data.msg=='success'){
                        this.$message({
                            type: 'success',
                            message:'新增课程成功'
                        });

                    }
                }).catch((err)=>{

                })}
                //console.log(this.imageUrl);
                //console.log(this.teacherId)

            },
            //清空按钮
            clear(){
                this.$confirm('此操作将清空所填内容, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.courseName='';
                    this.courseDesc='';
                    this.departmentName='';
                    this.teacherName='';
                    this.imageUrl='';
                    this.courseStartTime='';
                    this.courseDuration='';
                    this.courseAddress='';
                    this.$message({
                        type: 'success',
                        message: '清空成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消清空'
                    });
                });

            },
            //返回
            back() {
                this.$router.go(-1)
            },
            //图片上传地址转化为远程地址
            handleAvatarSuccess(res, file) {
                this.localhost = URL.createObjectURL(file.raw);
                this.imageUrl=res.data;
                //console.log(this.imageUrl);
                //console.log(res)
            },
            //当下拉菜单选择部门后返回部门id
            departmentChoose() {
                this.options2 = [];
                this.teacherName = '';
                for (var i = 0; i < this.options1.length; i++) {
                    if (this.options1[i].departmentName == this.departmentName) {
                        this.departmentName = this.options1[i].id
                    }
                }
                //console.log(this.departmentName);
                this.$axios({
                    method: 'get',
                    url: '/teacher/findTeacherByWhere',
                    params: {
                        limit: 20000,
                        departmentId: this.departmentName
                    }
                }).then((res) => {
                    //console.log(res.data.data.list);
                    this.options2 = res.data.data.list
                }).catch((err) => {
                });
                // console.log(this.options1);
                // console.log(this.departmentName);
            },
            //教室选择时提醒先选择部门
            ChooseTeacher(){
                if (this.departmentName==''){
                    this.$message({
                        type: 'warning',
                        message:'请先选择部门'
                    });
                }
            },
            //教师选择改变事件
            teacherChoose() {

                for (var i = 0; i < this.options2.length; i++) {
                    if (this.options2[i].teacherName == this.teacherName) {
                        this.teacherName = this.options2[i].id
                    }
                }
                //console.log(this.options2);
                //console.log(this.teacherName);
            },
            //图片上传到网页
            beforeAvatarUpload(file) {
                const isJPG = file.type === "image/jpeg";
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error("上传头像图片只能是 JPG 格式!");
                }
                if (!isLt2M) {
                    this.$message.error("上传头像图片大小不能超过 2MB!");
                }
                return isJPG && isLt2M;
            },
        },
        mounted() {
            //下拉菜单部门选择部分
            this.$axios({
                method: 'post',
                url: '/teacher/findAllDepartment',
            }).then((res) => {
                //console.log(res.data.data);
                this.options1 = res.data.data;
            }).catch((err) => {

            });
            //获取当前登录用户的managerName
            var token=sessionStorage.token;
            //console.log(token);
            this.$axios({
                url:'/manager/findManagerByToken',
                params: {
                    token:token
                },
            }).then((res)=>{
                //console.log(res.data.data.managerName);
                this.managerName=res.data.data.managerName
            });

        }
    }
</script>
<style lang="less" scoped>
    @contentbgcolor: white;
    @margin: 10px;
    .clearfix:after {
        content: '';
        clear: both;
        display: block;
    }

    .box {
        background: #f2f2f6;
    }

    .el-header {
        background-color: #fff;
        margin-top: 10px;
        line-height: 30px;

        .addCourseTitle {
            color: #333;
            float: left;
            font-size: 18px;
        }

        .return {
            color: #333;
            float: right;
            font-size: 18px;
            cursor: pointer;
        }

        .return:hover {
            color: #8cc5ff;
        }
    }

    .el-main {
        margin-top: 10px;
        background-color: #fff;
        color: #333;

        .courseDetails {
            font-weight: bold;
        }

        .inputTitle {
            width: 100%;

            .left {
                float: left;
                width: 47%;

                .select {
                    width: 100%;

                    .selectChildren {
                        width: 50%;
                    }
                }

                // .img {
                //     width: 150px;
                //     height: 150px;
                //     img {
                //         width: 100%;
                //         height: 100%;
                //     }
                // }
                // .imgUpBtn{
                //     margin-left: 30px;
                //     margin-top: 10px;
                // }
                #upload {
                    width: 178px;
                    height: 178px;
                    border: 1px dashed #6b6767;
                    border-radius: 6px;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                }

                .avatar-uploader .el-upload {
                    border: 1px dashed #cfa1a1;
                    border-radius: 6px;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                }

                .avatar-uploader .el-upload:hover {
                    border-color: #409eff;
                }

                .avatar-uploader-icon {
                    font-size: 28px;
                    color: #587397;
                    width: 178px;
                    height: 178px;
                    line-height: 178px;
                    text-align: center;
                }

                .avatar {
                    width: 178px;
                    height: 178px;
                    display: block;
                }
            }

            .right {
                margin-left: 6%;
                float: left;
                width: 47%;

                .date {
                    width: 100%;
                }

                .selectTeacher {
                    width: 100%;
                }
            }
        }
    }

    #footBox {
        width: 100%;
        height: 350px;
        background: white;
    }

    #footer {
        margin-left: 43%;
        height: 200px;

        .el-button {
            float: left;
            margin-top: 100px;
        }
    }

    body > .el-container {
        margin-bottom: 40px;
    }
</style>